<template>
  <div class="product-detail-page">
    <div class="seller-info-box">
      <div class="seller-info">
        
        <el-avatar :size="64" :src="getLocalAvatarPath(product?.user?.avatar)" class="seller-avatar"></el-avatar>
        <div class="seller-details">
          <h3 class="seller-name">{{ product?.userNickname || '未知卖家' }}</h3>
          <p class="seller-status">卖家状态：{{ product?.status || '未知' }}</p>
        </div>
      </div>
    </div>
    <div class="product-info-box" v-loading="loading">
      <div class="thumbs" v-if="product?.imageBase64">
        <img
          :src="getProductImage(product)"
          class="thumb-img"
          :class="{ selected: true }"
        />
      </div>
      <div class="main-image">
        <img 
          :src="product?.imageBase64 ? getProductImage(product) : 'https://picsum.photos/320/240'" 
          class="main-img" 
        />
      </div>
      <div class="info-content">
        <div class="product-details">
          <h2 class="product-title">{{ product?.title || '加载中...' }}</h2>
          <p class="product-price">¥ {{ product?.price || '0.00' }}</p>
          <p class="product-description">{{ product?.description || '暂无描述' }}</p>
          <div class="product-meta">
            <span class="product-category">分类：{{ product?.categoryName || '未分类' }}</span>
            <span class="product-status" :class="getStatusClass(product?.status)">
              {{ product?.status || '未知状态' }}
            </span>
          </div>
          <div class="product-actions">
            <el-button 
              type="primary" 
              class="order-btn" 
              @click="handleOrder"
              :disabled="!isLogged || product?.status !== '在售'"
            >
              {{ getOrderButtonText() }}
            </el-button>
            <el-button
              :type="isFavorited ? 'danger' : 'default'"
              class="favorite-btn"
              :class="{ 'is-favorited': isFavorited }"
              @click="handleFavorite"
              :disabled="!isLogged || checkingFavorite"
              :loading="checkingFavorite"
              :icon="isFavorited ? 'el-icon-star-on' : 'el-icon-star-off'"
            >
              {{ getFavoriteButtonText() }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 评论区 -->
    <div class="comment-section">
      <div class="comment-title">商品评论</div>
      <!-- 评论列表 -->
      <div class="comment-list" v-loading="commentsLoading">
        <template v-if="!comments || comments.length === 0">
          <div class="no-comments">
            暂无评论，快来发表第一条评论吧！
          </div>
        </template>
        <template v-else>
          <div class="comment-item" v-for="comment in comments" :key="comment.commentId">
            <el-avatar
              :size="36"
              :src="userMap[comment.userId]?.avatar || sellerAvatar"
              class="comment-avatar"
            />
            <span class="comment-nickname">{{ userMap[comment.userId]?.nickname || '未知用户' }}</span>
            <div class="comment-content">{{ comment.content || '无内容' }}</div>
            <div class="comment-time">{{ formatTime(comment.createTime) }}</div>
          </div>
        </template>
      </div>
      <div class="comment-title">发表评论</div>
      <div class="comment-input-box">
        <el-input
          type="textarea"
          v-model="newComment"
          :rows="3"
          placeholder="请输入评论内容"
          :disabled="!isLogged"
          class="comment-input"
        />
        <el-button
          type="primary"
          class="comment-btn"
          :disabled="!isLogged || !newComment.trim()"
          @click="submitComment"
        >发表评论</el-button>
        <div v-if="!isLogged" class="comment-login-tip">请先登录后再发表评论</div>
      </div>
    </div>
    <!-- 添加下单弹窗 -->
    <el-dialog
      title="确认订单"
      :visible.sync="orderDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="order-dialog-content" v-loading="submittingOrder">
        <div class="order-product-info">
          <img :src="getProductImage(product)" class="order-product-image" />
          <div class="order-product-details">
            <h3 class="order-product-title">{{ product?.title }}</h3>
            <p class="order-product-price">¥ {{ product?.price }}</p>
          </div>
        </div>
        <div class="order-summary">
          <div class="order-summary-item">
            <span>商品总价：</span>
            <span class="price">¥ {{ product?.price }}</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="orderDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitOrder" :loading="submittingOrder">确认下单</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ProductService from '@/Services/ProductService'
import CommentService from '@/Services/CommentService'
import UserService from '@/Services/UserService'
import InteractionService from '@/Services/InteractionService'
import OrderService from '@/Services/OrderService'
import LogService from '@/Services/LogService'
import MessageService from '@/Services/MessageService'
// 使用require.context批量导入Aatar目录下所有jpg头像
const avatarContext = require.context('@/assets/Aatar', false, /\.jpg$/)
const avatarList = avatarContext.keys().map(key => avatarContext(key))

export default {
  name: 'ProductDetail',
  data() {
    return {
      product: null,
      loading: false,
      commentsLoading: false,
      comments: [],
      userMap: {}, // userId => { nickname, avatar }
      newComment: '',
      sellerAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png', // 默认头像
      isFavorited: false,
      currentInteractionId: null,
      checkingFavorite: false,
      recordingHistory: false, // 添加记录浏览历史的状态
      orderDialogVisible: false,
      submittingOrder: false,
    }
  },
  computed: {
    isLogged() {
      return localStorage.getItem('isLogged') === 'true'
    }
  },
  created() {
    this.fetchProductDetail()
    this.fetchComments()
  },
  watch: {
    'product': {
      handler(newProduct) {
        if (newProduct && this.isLogged) {
          this.checkFavoriteStatus()
        }
      },
      immediate: true
    }
  },
  methods: {
    getLocalAvatarPath(avatarPath) {
      if (!avatarPath) return this.sellerAvatar
      const match = avatarPath.match(/(\d+)\.jpg/)
      if (match) {
        const fileName = match[0] // 10029.jpg
        const localPath = avatarList.find(path => path.includes(fileName))
        return localPath || this.sellerAvatar
      }
      return this.sellerAvatar
    },
    async fetchProductDetail() {
      this.loading = true
      try {
        const productId = this.$route.params.id
        const response = await ProductService.GetById(productId)
        if (response && response.code === 200 && response.data) {
          this.product = response.data
          this.isFavorited = false
          this.currentInteractionId = null
          // 记录浏览历史
          await this.recordBrowseHistory()
        } else {
          this.$message.error(response?.message || '获取商品信息失败')
        }
      } catch (error) {
        console.error('获取商品详情失败:', error)
        this.$message.error(error.response?.data?.message || '获取商品详情失败')
      } finally {
        this.loading = false
      }
    },
    getProductImage(product) {
      if (product?.imageBase64) {
        return `data:image/jpeg;base64,${product.imageBase64}`
      }
      return 'https://picsum.photos/320/240'
    },
    getStatusClass(status) {
      switch (status) {
        case '在售':
          return 'status-onsale'
        case '已售出':
          return 'status-sold'
        case '已下架':
          return 'status-offline'
        default:
          return ''
      }
    },
    getOrderButtonText() {
      if (!this.isLogged) return '请先登录'
      if (this.product?.status !== '在售') return '商品已售出'
      return '立即下单'
    },
    handleOrder() {
      if (!this.isLogged) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }
      if (this.product?.status !== '在售') {
        this.$message.warning('该商品已售出或下架')
        return
      }
      this.orderDialogVisible = true
    },
    async fetchComments() {
      this.commentsLoading = true
      try {
        const productId = this.$route.params.id
        const res = await CommentService.GetProductComments(productId)
        let commentsArr = []
        if (res && res.code === 200 && res.data && Array.isArray(res.data.$values)) {
          // 最新评论
          const latest = res.data.$values[0]
          // 历史评论
          let history = []
          if (
            latest &&
            latest.product &&
            latest.product.comments &&
            Array.isArray(latest.product.comments.$values)
          ) {
            history = latest.product.comments.$values
          }
          // 合并并去重
          const all = [latest, ...history].filter(Boolean)
          const unique = {}
          all.forEach(item => {
            if (item && item.commentId) unique[item.commentId] = item
          })
          commentsArr = Object.values(unique)
        }
        // 按时间倒序，所有评论并列显示
        this.comments = commentsArr
          .filter(item => item && item.content)
          .sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
        await this.fetchUserInfosForComments(this.comments)
      } catch (error) {
        this.comments = []
        this.$message.error('获取评论失败')
      } finally {
        this.commentsLoading = false
      }
    },
    async fetchUserInfosForComments(comments) {
      const userIds = [...new Set(comments.map(c => c.userId).filter(Boolean))]
      const userMap = {}
      await Promise.all(userIds.map(async userId => {
        try {
          const res = await UserService.GetById(userId)
          if (res && res.data) {
            userMap[userId] = {
              nickname: res.data.nickname,
              avatar: res.data.avatar
            }
          }
        } catch (e) {
          userMap[userId] = {
            nickname: '未知用户',
            avatar: ''
          }
        }
      }))
      this.userMap = userMap
    },
    formatTime(timeString) {
      if (!timeString) return ''
      const date = new Date(timeString)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    async submitComment() {
      if (!this.isLogged) {
        this.$message.warning('请先登录后再评论')
        return
      }
      if (!this.newComment.trim()) {
        this.$message.warning('评论内容不能为空')
        return
      }
      try {
        const productId = this.$route.params.id
        // 获取当前用户id
        const token = localStorage.getItem('token')
        let userId = null
        if (token) {
          try {
            const payload = JSON.parse(atob(token.split('.')[1]))
            userId = payload.userId || payload.id || payload.nameid || payload.sub || payload["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier"]
          } catch (e) { userId = null }
        }
        if (!userId) {
          this.$message.warning('无法获取用户信息，请重新登录')
          return
        }
        const model = {
          userId,
          productId,
          content: this.newComment
        }
        console.log('[submitComment] 提交评论数据:', model)
        const res = await CommentService.Create(model)
        console.log('[submitComment] 评论创建接口返回:', res)
        console.log('[submitComment] 返回数据结构:', {
          hasRes: !!res,
          hasData: !!(res && res.data),
          code: res?.code,
          dataCode: res?.data?.code,
          fullResponse: res
        })
        
        // 修改判断条件，同时检查 res.code 和 res.data.code
        if ((res && res.code === 200) || (res && res.data && res.data.code === 200)) {
          this.$message.success('评论成功！')
          this.newComment = ''
          // 重新获取评论列表
          await this.fetchComments()
        } else {
          const errorMsg = res?.data?.message || res?.message || '评论失败'
          this.$message.error(errorMsg)
          console.warn('[submitComment] 评论失败，返回:', res)
        }
      } catch (error) {
        console.error('[submitComment] 评论异常:', error)
        this.$message.error(error?.response?.data?.message || '评论失败')
      }
    },
    async checkFavoriteStatus() {
      if (this.checkingFavorite || !this.product?.productId) return
      
      this.checkingFavorite = true
      try {
        const token = localStorage.getItem('token')
        let userId = null
        if (token) {
          try {
            const payload = JSON.parse(atob(token.split('.')[1]))
            userId = payload.userId || payload.id || payload.nameid || payload.sub || payload["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier"]
          } catch (e) { userId = null }
        }
        if (!userId) return

        // 获取该商品的所有收藏记录
        const res = await InteractionService.GetProductInteractions(this.product.productId)
        if (res && res.code === 200 && res.data) {
          const interactions = Array.isArray(res.data.$values) ? res.data.$values : res.data
          // 查找当前用户的收藏记录
          const favoriteInteraction = interactions.find(i => 
            i.userId === userId && 
            i.type === 1 && 
            i.productId === this.product.productId
          )
          this.isFavorited = !!favoriteInteraction
          this.currentInteractionId = favoriteInteraction?.interactionId
        }
      } catch (error) {
        console.error('检查收藏状态失败:', error)
      } finally {
        this.checkingFavorite = false
      }
    },
    async handleFavorite() {
      if (!this.isLogged) {
        this.$message.warning('请先登录后再收藏')
        return
      }

      if (this.checkingFavorite) {
        this.$message.warning('正在处理收藏状态，请稍候')
        return
      }

      try {
        const token = localStorage.getItem('token')
        let userId = null
        if (token) {
          try {
            const payload = JSON.parse(atob(token.split('.')[1]))
            userId = payload.userId || payload.id || payload.nameid || payload.sub || payload["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier"]
          } catch (e) { userId = null }
        }
        if (!userId) {
          this.$message.warning('无法获取用户信息，请重新登录')
          return
        }

        // 再次检查收藏状态，防止重复操作
        await this.checkFavoriteStatus()

        if (this.isFavorited) {
          // 取消收藏
          if (this.currentInteractionId) {
            const res = await InteractionService.Delete(this.currentInteractionId)
            if (res && res.code === 200) {
              this.isFavorited = false
              this.currentInteractionId = null
              this.$message.success('取消收藏成功')
            } else {
              this.$message.error(res?.message || '取消收藏失败')
            }
          }
        } else {
          // 添加收藏前再次检查是否已收藏
          const checkRes = await InteractionService.GetProductInteractions(this.product.productId)
          if (checkRes && checkRes.code === 200 && checkRes.data) {
            const interactions = Array.isArray(checkRes.data.$values) ? checkRes.data.$values : checkRes.data
            const existingFavorite = interactions.find(i => 
              i.userId === userId && 
              i.type === 1 && 
              i.productId === this.product.productId
            )
            
            if (existingFavorite) {
              this.isFavorited = true
              this.currentInteractionId = existingFavorite.interactionId
              this.$message.warning('该商品已在收藏列表中')
              return
            }
          }

          // 添加收藏
          const model = {
            userId: userId,
            productId: this.product.productId,
            type: 1 // 1表示收藏
          }
          const res = await InteractionService.Create(model)
          if (res && res.code === 200) {
            this.isFavorited = true
            this.currentInteractionId = res.data.interactionId
            this.$message.success('收藏成功')
            // 发送消息
            try {
              // 获取当前用户学号
              const userRes = await UserService.GetById(userId)
              let studentId = ''
              if (userRes && userRes.data) {
                studentId = userRes.data.studentId || userRes.data.name || userRes.data.nickname || ''
              }
              // 获取商品信息，获取发布者id
              const productRes = await ProductService.GetById(this.product.productId)
              let publisherId = ''
              let productTitle = ''
              if (productRes && productRes.data) {
                publisherId = productRes.data.userId
                productTitle = productRes.data.title
              }
              if (publisherId) {
                await MessageService.Create({
                  userId: publisherId,
                  content: `${studentId}收藏了你的商品${productTitle}`
                })
              }
            } catch (msgError) {
              console.error('发送收藏消息失败：', msgError)
            }
          } else {
            this.$message.error(res?.message || '收藏失败')
          }
        }
      } catch (error) {
        console.error('收藏操作失败:', error)
        this.$message.error(error?.response?.data?.message || '操作失败')
      }
    },
    getFavoriteButtonText() {
      if (!this.isLogged) return '请先登录'
      if (this.checkingFavorite) return '处理中...'
      return this.isFavorited ? '取消收藏' : '收藏'
    },
    // 添加记录浏览历史的方法
    async recordBrowseHistory() {
      if (!this.isLogged || this.recordingHistory || !this.product?.productId) return

      this.recordingHistory = true
      try {
        const token = localStorage.getItem('token')
        let userId = null
        if (token) {
          try {
            const payload = JSON.parse(atob(token.split('.')[1]))
            userId = payload.userId || payload.id || payload.nameid || payload.sub || payload["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier"]
          } catch (e) { userId = null }
        }
        if (!userId) return

        // 创建浏览记录
        const model = {
          userId: userId,
          productId: this.product.productId,
          type: 2 // 2表示浏览记录
        }
        await InteractionService.Create(model)
      } catch (error) {
        console.error('记录浏览历史失败:', error)
      } finally {
        this.recordingHistory = false
      }
    },
    async submitOrder() {
      if (this.submittingOrder) return
      
      this.submittingOrder = true
      try {
        const token = localStorage.getItem('token')
        let userId = null
        if (token) {
          try {
            const payload = JSON.parse(atob(token.split('.')[1]))
            userId = payload.userId || payload.id || payload.nameid || payload.sub || payload["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier"]
          } catch (e) { userId = null }
        }
        if (!userId) {
          this.$message.warning('无法获取用户信息，请重新登录')
          return
        }

        const orderData = {
          userId: userId,
          productId: this.product.productId,
          status: '待付款'
        }

        const res = await OrderService.Create(orderData)
        if (res && res.code === 200) {
          // 日志记录
          try {
            // 通过UserService.GetById获取学号
            const userRes = await UserService.GetById(userId)
            let studentId = ''
            if (userRes && userRes.data) {
              studentId = userRes.data.studentId || userRes.data.name || userRes.data.nickname || ''
            }
            await LogService.Create({
              id: this.generateGuid(),
              userId: userId,
              detail: `${studentId}下单了${this.product.title}`,
              createTime: new Date().toISOString()
            })
            // 发送消息
            try {
              // 获取商品信息，获取发布者id
              const productRes = await ProductService.GetById(this.product.productId)
              let publisherId = ''
              let productTitle = ''
              if (productRes && productRes.data) {
                publisherId = productRes.data.userId
                productTitle = productRes.data.title
              }
              if (publisherId) {
                await MessageService.Create({
                  userId: publisherId,
                  content: `${studentId}下单了你的商品${productTitle}`
                })
              }
            } catch (msgError) {
              console.error('发送下单消息失败：', msgError)
            }
          } catch (logError) {
            console.error('记录下单日志失败：', logError)
          }
          // 更新商品状态为已售出
          try {
            await ProductService.UpdateStatus(this.product.productId, '已售出')
            this.$message.success('下单成功！商品已售出')
            // 更新商品状态
            await this.fetchProductDetail()
          } catch (error) {
            console.error('更新商品状态失败:', error)
            this.$message.warning('下单成功，但商品状态更新失败')
          }
          
          this.orderDialogVisible = false
          // 跳转到订单页面
          this.$router.push({
            name: 'Order',
            query: {
              orderId: res.data.orderId
            }
          })
        } else {
          this.$message.error(res?.message || '下单失败')
        }
      } catch (error) {
        console.error('下单失败:', error)
        this.$message.error(error?.response?.data?.message || '下单失败')
      } finally {
        this.submittingOrder = false
      }
    },
    // 生成GUID的方法
    generateGuid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16)
      })
    },
  }
}
</script>

<style scoped>
.product-detail-page {
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 16px;
}
.seller-info-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 24px 32px;
  font-size: 20px;
  margin-bottom: 24px;
}
.product-info-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: row;
  padding: 32px 24px;
  min-height: 340px;
  align-items: flex-start;
}
.thumbs {
  flex: 0 0 10%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.thumb-img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
  background: #f5f5f5;
  border: 2px solid #eee;
  cursor: pointer;
  transition: border 0.2s;
  padding: 4px;
  box-sizing: border-box;
}
.thumb-img.selected {
  border: 2px solid #ffd700;
}
.main-image {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.main-img {
  width: 100%;
  max-width: 320px;
  height: 240px;
  border-radius: 12px;
  object-fit: contain;
  background: #f5f5f5;
  border: 1px solid #eee;
  padding: 12px;
  box-sizing: border-box;
}
.info-content {
  flex: 0 0 50%;
  font-size: 22px;
  padding-left: 32px;
  display: flex;
  align-items: flex-start;
  min-height: 240px;
}

.product-details {
  width: 100%;
}

.product-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 16px;
}

.product-price {
  font-size: 28px;
  color: #ff6a00;
  font-weight: bold;
  margin-bottom: 16px;
}

.product-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
}

.order-btn {
  width: 200px;
  height: 48px;
  font-size: 18px;
  background-color: #ff6a00;
  border-color: #ff6a00;
  border-radius: 24px;
  transition: all 0.3s ease;
}

.order-btn:hover {
  background-color: #ff8533;
  border-color: #ff8533;
  transform: translateY(-2px);
}

.order-btn:disabled {
  background-color: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
  transform: none;
}

.comment-section {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin: 32px auto 0 auto;
  max-width: 1100px;
  padding: 32px 32px 24px 32px;
}
.comment-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 18px;
}
.comment-input-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.comment-input {
  width: 100%;
}
.comment-btn {
  align-self: flex-end;
  min-width: 120px;
}
.comment-login-tip {
  color: #ff6a00;
  font-size: 14px;
  margin-top: 4px;
}
.seller-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.seller-avatar {
  border: 2px solid #ffd700;
}

.seller-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seller-name {
  font-size: 20px;
  color: #333;
  margin: 0;
}

.seller-status {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.product-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: center;
}

.product-category {
  font-size: 14px;
  color: #666;
}

.product-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  color: white;
}

.status-onsale {
  background-color: #67C23A;
}

.status-sold {
  background-color: #F56C6C;
}

.status-offline {
  background-color: #909399;
}

.comment-list {
  margin-bottom: 32px;
}

.comment-item {
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-avatar {
  margin-right: 8px;
}

.comment-nickname {
  font-size: 15px;
  color: #409EFF;
  font-weight: 500;
  margin-right: 12px;
  min-width: 60px;
}

.comment-content {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 8px;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.no-comments {
  text-align: center;
  color: #999;
  padding: 32px 0;
  font-size: 14px;
}

.product-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.favorite-btn {
  width: 120px;
  height: 48px;
  font-size: 18px;
  border-radius: 24px;
  transition: all 0.3s ease;
}

.favorite-btn:hover {
  transform: translateY(-2px);
}

.favorite-btn.is-favorited {
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  color: white;
}

.favorite-btn.is-favorited:hover {
  background-color: #ff7875;
  border-color: #ff7875;
}

.favorite-btn:disabled {
  background-color: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
  transform: none;
}

.favorite-btn:disabled.is-favorited {
  background-color: #ffa39e;
  border-color: #ffa39e;
  color: white;
}

.order-dialog-content {
  padding: 20px 0;
}

.order-product-info {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.order-product-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 8px;
  background: #f5f5f5;
  border: 1px solid #eee;
  padding: 8px;
}

.order-product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.order-product-title {
  font-size: 18px;
  color: #333;
  margin: 0 0 12px 0;
}

.order-product-price {
  font-size: 24px;
  color: #ff6a00;
  font-weight: bold;
  margin: 0;
}

.order-summary {
  background: #f9f9f9;
  padding: 16px;
  border-radius: 8px;
}

.order-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.order-summary-item .price {
  color: #ff6a00;
  font-weight: bold;
  font-size: 20px;
}
</style> 